<template>
  <div>
    <div class="have_the_call">
      <div class="content">
        <div>
          <p>最受好评电影</p>
        </div>
        <div>
          <ul>
            <li v-for="item in data.hot" :key="item.id">
              <div>
                <img v-lazy="item.img"/>
                <div>
                  {{
                    item.scoreLabel == "暂无评分"
                      ? item.wish + "人想看"
                      : "观众评分" + item.sc
                  }}
                </div>
              </div>
              <p>
                {{ item.nm }}
              </p>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <div class="call_list">
      <div>
        <ul>
          <li v-for="item in data.hot" @click="goList(item)" :key="item.id">
            <div><img v-lazy="item.img" /></div>
            <div>
              <div>
                <h1>
                  {{ item.nm
                  }}<span
                    v-show="item.ver.indexOf('IMAX 2D') != -1"
                    class="span_2d"
                  ></span>
                </h1>
                <p v-if="item.showInfo.indexOf('今') != -1 && item.sc == 0">
                  暂无评分
                </p>
                <p v-if="item.sc != 0">
                  观众评 <span class="golden_font">{{ item.sc }}</span>
                </p>
                <p v-else>
                  <span class="golden_font">{{ item.wish }}</span
                  >人想看
                </p>

                <p v-show="item.desc != ''">{{ item.desc }}</p>
                <p>{{ item.showInfo }}</p>
              </div>
              <div>
                <button
                  :class="
                    item.showStateButton.content == '购票' ? 'red' : 'blue'
                  "
                >
                  {{ item.showStateButton.content }}
                </button>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <mao-yan-aside></mao-yan-aside>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import MaoYanAside from "@/components/MaoYanAside.vue";

export default {
  components: { MaoYanAside },
  name: "Hot",
  data() {
    return {
      data: { hot: [] },
    };
  },
  methods: {
    goList(item) {
      this.$router.push({
        name: "Item",
        params: item,
      });
    },
  },
  created() {
    //使用axios 获取数据
    axios
      .get("api/mmdb/movie/v3/list/hot.json?ct=热点&ci=30&channelId=4")
      .then((data) => {
        this.data = data.data.data;
        this.data.hot.forEach((e) => {
          e.img = e.img.replace("w.h", "128.180"); //64*90
        });
        this.data.hot.sort((a, b) => {
          if (a.sc == 0 || a.sc < b.sc) return 1;
          else return -1;
        });

        console.log("hot:", JSON.parse(JSON.stringify(this.data)));
      })
      .catch((error) => console.log("获取数据失败!", error));
  },
};
</script>

<style>
.call_list {
  position: relative;
}

.span_2d {
  display: inline-block;
  width: 40px;
  vertical-align:middle;
  margin-left: 2px;
  height: 20px;
  background-image: url("https://s0.meituan.net/bs/myfe/canary/file/touchnode/images/dpmmweb/hot-tab/img/base64/v2dimax.png");
  background-size: 100%;
  background-repeat: no-repeat;
}
</style>